<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0 shrink-to-fit=no">
    <title>Welcome to Rocky's website!</title>
    <link rel="stylesheet" href="../../style/main.css">

    <link rel="stylesheet" href="../../bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="../../style/navbar-fixed-left.css">
    <link rel="stylesheet" href="../../style/halloween.css">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7664629045569792"
     crossorigin="anonymous"></script>
</head>

<body class="text-center body" id="page-top hw_back">
    <nav class="navbar navbar-expand-lg navbar-dark fixed-left" id="sideNav hw_nav" role="banner"
        style="background-color: #AB47BC">
        <a class="navbar-brand js-scroll-trigger">
            <span class="d-block d-lg-none margin-banner">Welcome to Rocky's website!</span>
            <span class="d-none d-lg-block">
                <img class="img-fluid img-profile mx-auto mb-2 rocky_scale" src="../../Rocky_By_薰凝.webp" />
                <figcaption class="p1-1d" id="fc"><em>Artwork by 薰凝</em></figcaption>
            </span>
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive"
            aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"><span
                class="navbar-toggler-icon"></span></button>
        <div class="collapse navbar-collapse special" id="navbarResponsive">
            <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
                <li class="nav-item"><a class="nav-link " href="../playground.html">Back</a></li>
            </ul>
            <ul class="navbar-nav mr-auto mt-auto">
                <li class="nav-item"><a class="nav-link" href="https://twitter.com/kirbysfan2"><img
                            src="../../icons/Twitter.svg" class="twitter"></a></li>
            </ul>
        </div>
    </nav>
    <div class="container-fluid p-0 correct">
        <button type="button" class="btn top btn-floating btn-lg" id="btn-back-to-top">
            <i class="fas fa-arrow-up">▲</i>
        </button>
        <div>
            <img src="../../welcome_hw.png" class="welcome">
        </div>
        <div class="content">
            <div>
                <div class="box0 textbox" id="hw_sect">
                    <div class="text">
                        <p class="greeting text-center" id="hw_cont"><strong>Trick or Treat!!!</strong></p>
                        <p class="greeting text-center hw_kmj" id="hw_cont"><strong>ヾ(≧へ≦)〃</strong></p>
                        <p class="gap"></p><br>
                        <p class="greeting1" id="hw_cont">
                            Nyahoo!!! This is Rocky!!!<br>
                            I haven't been so excited for a festival for a long time!<br>
                            But why? Because... This is my first time spending Halloween in the Meow Kingdom! q(≧▽≦q)
                        </p>
                        <p class="greeting2" id="hw_cont">
                            This time, I'm going to prepare for Halloween in a cute way! Only to make this Halloween
                            awesome!!!
                            <!--<p class="hideit">(As long as you don't make me in fury...)</p>!-->
                        </p>
                        <p class="greeting1 text-center" id="hw_cont">So... can you give me some candies? Or maybe
                            chocolate?</p>
                        <div class="candy text-center">
                            <button class="candy_button btn btn-primary bt1" onclick="giveCandy1()">🍬</button>
                            <button class="candy_button btn btn-primary bt2" onclick="giveCandy2()">🍭</button>
                            <button class="candy_button btn btn-primary bt2" onclick="giveCandy3()">🍫</button>
                            <button class="candy_button btn btn-primary bt3" onclick="giveCandy4()">🍮</button>
                        </div>
                        <p class="text-center" id="halloween_text">&nbsp;</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="caution">
            <p><strong>The DNAxCAT character body is copyrighted to DNAxCAT.</strong></p>
        </div>
    </div>
    <script src="../../bootstrap/js/bootstrap.bundle.js"></script>
    <script src="../../js/scripts.js"></script>
    <script src="../../js/halloween.js"></script>

    <body>

</html>